<template>
  <div class="box">
    <el-form size="medium" ref="itemForm" :model="obj" :rules="itemRules" label-width="100px">
      <el-form-item label="维权类型">{{ order.type_text }}</el-form-item>

      <el-form-item label="处理方式">
        <el-radio-group v-model="obj.state">
          <span v-if="order.type == 1">
            <el-radio :label="6">自动退款</el-radio>
            <el-radio v-if="login_type == 'mall'" :label="5">手动退款</el-radio>
            <el-radio :label="3">驳回申请</el-radio>
          </span>

          <span v-if="order.type == 2">
            <span v-if="order.state == 1">
              <el-radio :label="2">同意申请</el-radio>
              <el-radio :label="7">同意退款</el-radio>
              <el-radio :label="3">驳回申请</el-radio>
              <el-radio v-if="login_type == 'mall'" :label="5">手动退款</el-radio>
            </span>
            <span v-if="order.state == 13 || order.state == 10">
              <el-radio :label="7">同意退款</el-radio>
              <el-radio v-if="login_type == 'mall'" :label="5">手动退款</el-radio>
              <template v-if="order.state == 10">
                <el-radio :label="3">驳回申请</el-radio>
              </template>
            </span>
            <span v-if="order.state == 12"><el-radio :label="3">驳回申请</el-radio></span>
          </span>

          <span v-if="order.type == 3">
            <span v-if="order.state == 1">
              <el-radio :label="3">驳回申请</el-radio>
              <el-radio :label="2">同意申请</el-radio>
              <el-radio :label="4">换货(确认发货)</el-radio>
            </span>
            <span v-if="order.state == 12 || order.state == 14">
              <el-radio :label="4">换货(确认发货)</el-radio>
              <el-radio :label="3">驳回申请</el-radio>
            </span>

            <span v-if="order.state == 4"><el-radio :label="8">关闭申请(换货完成)</el-radio></span>
          </span>

          <!-- <el-radio :label="2">同意申请</el-radio>
          <el-radio :label="3">驳回申请</el-radio>
          <el-radio :label="4">换货(确认发货)</el-radio>
          <el-radio :label="5">手动退款</el-radio>
          <el-radio :label="6">自动退款</el-radio>
          <el-radio :label="7">同意退款</el-radio>
          <el-radio :label="8">关闭申请(换货完成)</el-radio> -->
        </el-radio-group>

        <div class="fks" v-if="obj.state == 4 && (order.state == 1 || order.state == 12)">
          <div style="color:#909399;font-size:12px;line-height:24px;">无需客户寄回商品，商家直接发换货商品</div>
        </div>

        <div class="fks" v-if="obj.state == 6">
          <div style="color:#909399;font-size:12px;line-height:24px;">
            微信支付方式：会返回到相应的支付渠道(如零钱或银行卡)
            <br />
            <template v-if="login_type == 'mall'">
              其他支付方式：会返回到微信钱包(需商户平台余额充足)
              <br />
            </template>

            如有余额抵扣：会返回金额到商城用户余额
            <br />
            如有积分抵扣：申请维权的订单抵扣积分不退还
          </div>
        </div>

        <div class="fks" v-if="obj.state == 7">
          <div style="color:#909399;font-size:12px;line-height:24px;">
            请确认您已经收到客户寄出的商品后同意退款.
            <br />
            微信支付方式：会返回到相应的支付渠道(如零钱或银行卡)
            <br />
            <template v-if="login_type == 'mall'">
              其他支付方式：会返回到微信钱包(需商户平台余额充足)
              <br />
            </template>
            如有余额抵扣：会返回金额到商城用户余额
            <br />
            如有积分抵扣：申请维权的订单抵扣积分不退还
          </div>
        </div>

        <div class="fks" v-if="obj.state == 5"><div style="color:#909399;font-size:12px;line-height:24px;">手动退款：订单会完成退款处理，您用其他方式进行退款</div></div>
      </el-form-item>

      <el-form-item label="驳回申请" v-if="obj.state == 3"><el-input v-model="obj.reject_remake" type="textarea" rows="3" style="width:600px;"></el-input></el-form-item>

      <el-form-item label="退货地址" v-if="obj.state == 2">
        <el-select v-model="obj.after_address_id" filterable placeholder="请选择退货地址">
          <el-option v-for="item in returnList" :key="item.id" :label="item.status == 1 ? item.name + ' (默认)' : item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择物流" v-if="obj.state == 4">
        <el-select v-model="obj.deliver_company" filterable placeholder="请选择物流">
          <el-option v-for="item in expressList" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="物流单号" v-if="obj.state == 4"><el-input placeholder="请输入物流单号" v-model="obj.deliver_num" style="width:400px;"></el-input></el-form-item>

      <el-form-item><el-button type="primary" @click="saveData">保存数据</el-button></el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getexpress} from '@/api/shop/freight';
import {getAddressList} from '@/api/shop/return';
import {addressOrder, editAfter} from '@/api/shop/order';
import {logintype_byurl} from '@/utils/auth';
export default {
  name: 'afterAccess',
  data() {
    return {
      isLoading: false,
      expressList: [],
      returnList: [],
      obj: {
        id: '',
        reject_remake: '',
        after_address_id: '',
        deliver_company: '',
        deliver_num: '',
        deliver_time: '',
        state: -1
      },
      itemRules: {
        consignee: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入收货人'
          }
        ],
        iphone: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入收货人'
          }
        ],
        districtSelected: [
          {
            type: 'array',
            required: true,
            message: '请选择所在区域'
          }
        ],
        address: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入详细地址'
          }
        ]
      },
      login_type: ''
    };
  },
  computed: {
    // address(){
    //   return '111';
    // }
  },
  props: {
    order: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {
    this.login_type = logintype_byurl();
    //console.log(this.order)
    this.getExpressAll();
    this.getReturnAll();
  },
  methods: {
    //获取所有退货地址
    getReturnAll() {
      this.isLoading = true;
      getAddressList({}, 1, 999999999)
        .then(res => {
          this.isLoading = false;
          this.returnList = res.msg.data;
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取所有快递
    getExpressAll() {
      this.isLoading = true;
      getexpress().then(res => {
        this.isLoading = false;
        this.expressList = res.msg;
      });
    },
    //保存数据(修改发货地址)
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          let o = {...this.obj};
          o.id = this.order.id;
          if (o.state == 4) {
            o.deliver_time = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
          }

          this.isLoading = true;
          editAfter(o)
            .then(res => {
              this.isLoading = false;
              this.$emit('success');
            })
            .catch(e => {
              this.isLoading = false;
            });
        } else {
          //console.log('error')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
//灰色框
.fks {
  background: #f4f6f8;
  //width: 500px;
  padding: 20px;
  color: #606266;
  margin-top: 22px;
}

// .el-form-item{
//   margin-bottom:15px;
// }

// //选择商品
// .proSelect{
//   width: 100%;
//   border: 1px solid #DCDFE6;
//   //margin-bottom: 10px;

//   .phead{
//     background: #f4f6f8;
//     font-weight: 700;
//     display: flex;
//     height: 40px;
//     line-height: 40px;
//     border-bottom: 1px solid #DCDFE6;

//     .name{
//       flex: 1;
//       padding-left: 10px;
//     }

//     .count{
//       width: 80px;
//       text-align: center;
//     }

//     .status{
//       width: 80px;
//       text-align: center;
//     }

//     .action{
//       width: 100px;
//       text-align: center;
//     }
//   }

//   ul{
//     margin: 0;
//     max-height: 210px;
//     overflow-y: auto;

//     li{
//       display: flex;
//       cursor: pointer;
//       line-height: 40px;
//       padding: 10px 0;
//       font-size: 13px;
//       border-bottom: 1px solid #DCDFE6;
//       padding-left: 10px;

//       &:last-child{
//         border-bottom: none;
//       }

//       .pro{
//         display: flex;
//         flex: 1;

//         .txt{
//           display: flex;
//           padding-left: 10px;
//           flex: 1;
//           line-height: 18px;
//           align-items: center;

//           .mark{
//             color: #F56C6C;
//             background: #f2f4f6;
//             display: table;
//             border-radius: 5px;
//             padding: 0 3px;
//             margin-right: 3px;
//           }
//         }
//       }

//       .count{
//         width: 80px;
//         text-align: center;
//       }

//       .status{
//         width: 80px;
//         text-align: center;

//         &.done{
//           color: #67C23A;
//         }

//         &.none{
//           color: #F56C6C;
//         }
//       }

//       .action{
//         width: 100px;
//         text-align: center;
//       }
//     }
//   }
// }

// .el-input {
//   width: 270px;
// }

// .box {
//   width: 100%;
//   /*padding: 60px;
//   height: calc(100vh - 77px);
//   overflow: scroll;*/
// }
</style>
